<style lang="scss">
  .wh-home {
    width: 100%;
    .top-div {
      width: 100%;
      border-bottom: 1px dotted #ddd;
    }
    .top-div-item {
      // height: 100%;
      // vertical-align: middle;
      padding: 12px 0 0 0;
      border-right: 1px dotted #dddddd;
      cursor: pointer;
      .top-div-item-box {
        float: left;
      }
      .top-div-icon {
        text-align: right;
        width: 30%;
        height: 60px;
        line-height: 72px;
        .top-icon {
          font-size: 36px;
        }
      }
      .top-div-name-value {
        text-align: center;
        width: 70%;
        .top-value {
          display: block;
          height: 30px;
          line-height: 30px;
          font-size: 20px;
          font-weight: bold;
        }
        .top-name {
          display: block;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
        }
      }
    }
    .top-div-item:hover {
      background: #eeeeee;
    }
    .center-div {
      width: 100%;
      // height: 50vh;
      overflow: hidden;
      // margin-top: 7px;
      // border-top: 1px dotted #dddddd;
      border-bottom: 1px dotted #dddddd;
      // padding: 10px;
      .center-item {
        float: left;
      }
      .warning-div {
        width: 40%;
        .dept-day-chart-div {
          width: 100%;
          height: 360px;
          padding-top: 20px;
        }
        .dept-day-list-div {
          width: 100%;
          height: 360px;
          padding-top: 2px;
          font-size: 16px;
          .dept-day-item {
            width: 100%;
            overflow: hidden;
            .dept-span-block {
              display: block;
              float: left;
              height: 44px;
              line-height: 44px;
            }
            .dept-icon {
              width: 10%;
              padding: 0 12px;
              font-size: 20px;
            }
            .dept-name {
              width: 30%;
              padding: 0 12px;
            }
            .dept-value {
              width: 15%;
              padding: 0 12px;
            }
          }
        }
      }
      .state-div {
        width: 25%;
        outline: 1px dotted #dddddd;
        .state-chart-div {
          width: 100%;
          height: 360px;
          padding-top: 20px;
        }
      }
      .source-div {
        width: 35%;
        .source-chart-div {
          width: 100%;
          height: 360px;
          padding-top: 20px;
        }
      }
      .ymd-div {
        width: 60%;
        outline: 1px dotted #dddddd;
        .ymd-div-item {
          // height: 100%;
          // vertical-align: middle;
          padding: 12px 0 0 0;
          border-right: 1px dotted #dddddd;
          border-top: 1px dotted #dddddd;
          cursor: pointer;
          .top-div-item-box {
            float: left;
          }
          .top-div-icon {
            text-align: right;
            width: 30%;
            height: 90px;
            line-height: 140px;
            .top-icon {
              font-size: 60px;
            }
          }
          .top-div-name-value {
            text-align: center;
            width: 70%;
            .top-value {
              display: block;
              height: 60px;
              line-height: 70px;
              font-size: 20px;
              font-weight: bold;
            }
            .top-name {
              display: block;
              height: 60px;
              line-height: 30px;
              font-size: 16px;
            }
          }
        }
      }
    }
    .bottom-div {
      width: 100%;
      overflow-x: hidden;
      margin-top: 7px;
      border-top: 1px dotted #dddddd;
      border-bottom: 1px dotted #dddddd;
      .bottom-item {
        float: left;
      }

      .whole-number-div {
        width: 100%;
        outline: 1px dotted #dddddd;
        .whole-number-chart-div {
          width: 100%;
          height: 400px;
          padding-top: 20px;
        }
      }

      .dept-number-div {
        width: 100%;
        outline: 1px dotted #dddddd;
        .dept-number-chart-div {
          width: 100%;
          height: 400px;
          padding-top: 20px;
        }
      }
      .dept-effity-div {
        width: 100%;
        margin-bottom: 87px;
        .dept-effity-chart-div {
          width: 100%;
          height: 400px;
          padding-top: 20px;
        }
      }
    }
  }
</style>

<template>
  <div class="wh-home">
    <!-- 年月日类别超期件统计 -->
    <!-- <div class="top-div">
      <el-row>
        <el-col :span="3" class="year-div top-div-item" style="color: #B6A2DE">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.yearCount ? ymdTypeDueCountData.yearCount : 0}} (件)</span>
            <span class="top-name">本年</span>
          </div>
        </el-col>
        <el-col :span="3" class="month-div top-div-item" style="color: #5AB1EF;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.monthCount ? ymdTypeDueCountData.monthCount : 0}} (件)</span>
            <span class="top-name">本月</span>
          </div>
        </el-col>
        <el-col :span="3" class="day-div top-div-item" style="color: #2EC7C9;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-date top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.dayCount ? ymdTypeDueCountData.dayCount : 0}} (件)</span>
            <span class="top-name">本日</span>
          </div>
        </el-col>
        <el-col :span="3" class="tsjb-div top-div-item" style="color: #97B552;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-error top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.complaintCount ? ymdTypeDueCountData.complaintCount : 0}} (件)</span>
            <span class="top-name">投诉举报</span>
          </div>
        </el-col>
        <el-col :span="3" class="jyyj-div top-div-item" style="color: #E5CF0D;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-share top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.adviseCount ? ymdTypeDueCountData.adviseCount : 0}} (件)</span>
            <span class="top-name">建议意见</span>
          </div>
        </el-col>
        <el-col :span="3" class="zxfw-div top-div-item" style="color: #FFB980;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-question top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.questionCount ? ymdTypeDueCountData.questionCount : 0}} (件)</span>
            <span class="top-name">咨询服务</span>
          </div>
        </el-col>
        <el-col :span="3" class="year-div top-div-item" style="color: #D87A80;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-time top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.overdueCount ? ymdTypeDueCountData.overdueCount : 0}} (件)</span>
            <span class="top-name">超期件</span>
          </div>
        </el-col>
        <el-col :span="3" class="year-div top-div-item" style="color: #AA8C8A;">
          <div class="top-div-item-box top-div-icon">
            <span class="el-icon-scissors top-icon"></span>
          </div>
          <div class="top-div-item-box top-div-name-value">
            <span class="top-value">{{ymdTypeDueCountData.unsatisfyCount ? ymdTypeDueCountData.unsatisfyCount : 0}} (件)</span>
            <span class="top-name">不满意件</span>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <!-- 各处室今日预警统计 -->
    <div class="center-div">
      <el-row class="center-item warning-div"
              v-loading="warningDivLoading">
        <!-- <h3 class="charts-title">今日预警</h3> -->
        <el-col :span="14">
          <div class="dept-day-chart-div"
               ref="deptDayChartDiv"
               id="deptDayChartDiv"></div>
        </el-col>
        <el-col :span="10">
          <div class="dept-day-list-div"
               id="dept-day-list-div">
            <div class="dept-day-item"
                 v-for="item in deptDayListData"
                 :key="item.name">
              <span class="el-icon-message-solid dept-icon dept-span-block"
                    :style="{'color': item.color}"></span>
              <span class="dept-name dept-span-block">{{item.name}}</span>
              <span class="dept-value dept-span-block">{{item.value}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 年月日统计 -->
      <el-row class="center-item ymd-div">
        <el-col :span="24">
          <el-row type="flex"
                  class="ymd-chart-div"
                  ref="ymdChartDiv"
                  id="ymdChartDiv">
            <el-col class="year-div ymd-div-item"
                    style="color: #B6A2DE">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-date top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.yearCount ? ymdTypeDueCountData.yearCount : 0}}</span>
                <span class="top-name">本年 (件)</span>
              </div>
            </el-col>
            <el-col class="month-div ymd-div-item"
                    style="color: #5AB1EF;">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-date top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.monthCount ? ymdTypeDueCountData.monthCount : 0}}</span>
                <span class="top-name">本月 (件)</span>
              </div>
            </el-col>
            <el-col class="day-div ymd-div-item"
                    style="color: #2EC7C9;">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-date top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.dayCount ? ymdTypeDueCountData.dayCount : 0}}</span>
                <span class="top-name">本日 (件)</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row type="flex"
                  class="ymd-chart-div"
                  ref="ymdChartDiv"
                  id="ymdChartDiv">
            <el-col class="tsjb-div ymd-div-item"
                    style="color: #97B552;">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-error top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.complaintCount ? ymdTypeDueCountData.complaintCount : 0}}</span>
                <span class="top-name">投诉举报 (件)</span>
              </div>
            </el-col>
            <el-col class="jyyj-div ymd-div-item"
                    style="color: #E5CF0D;">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-share top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.adviseCount ? ymdTypeDueCountData.adviseCount : 0}}</span>
                <span class="top-name">建议意见 (件)</span>
              </div>
            </el-col>
            <el-col class="zxfw-div ymd-div-item"
                    style="color: #FFB980;">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-question top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.questionCount ? ymdTypeDueCountData.questionCount : 0}}</span>
                <span class="top-name">咨询服务 (件)</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row type="flex"
                  class="ymd-chart-div"
                  ref="ymdChartDiv"
                  id="ymdChartDiv">
            <el-col class="year-div ymd-div-item"
                    style="color: #D87A80;">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-time top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.overdueCount ? ymdTypeDueCountData.overdueCount : 0}}</span>
                <span class="top-name">超期件 (件)</span>
              </div>
            </el-col>
            <el-col class="year-div ymd-div-item"
                    style="color: #AA8C8A;">
              <div class="top-div-item-box top-div-icon">
                <span class="el-icon-scissors top-icon"></span>
              </div>
              <div class="top-div-item-box top-div-name-value">
                <span class="top-value">{{ymdTypeDueCountData.unsatisfyCount ? ymdTypeDueCountData.unsatisfyCount : 0}}</span>
                <span class="top-name">不满意件 (件)</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 工单办理情况 -->
      <!-- <el-row class="center-item state-div" v-loading="stateDivLoading">
        <el-col :span="24">
          <div class="state-chart-div" ref="stateChartDiv" id="stateChartDiv"></div>
        </el-col>
      </el-row>
      <el-row class="center-item source-div" v-loading="sourceDivLoading">
        <el-col :span="24">
          <div class="source-chart-div" ref="sourceChartDiv" id="sourceChartDiv"></div>
        </el-col>
      </el-row> -->
    </div>
    <!-- 全局各月办理量统计 -->
    <div class="bottom-div">
      <el-row class="bottom-item whole-number-div"
              v-loading="wholeNumDivLoading">
        <el-col :span="24">
          <div class="whole-number-chart-div"
               ref="wholeNumberChartDiv"
               id="wholeNumberChartDiv"></div>
        </el-col>
      </el-row>
    </div>
    <!-- 处室办理量统计 -->
    <div class="bottom-div">
      <el-row class="bottom-item dept-number-div"
              v-loading="deptNumDivLoading">
        <el-col :span="24">
          <div class="dept-number-chart-div"
               ref="deptNumberChartDiv"
               id="deptNumberChartDiv"></div>
        </el-col>
      </el-row>
    </div>
    <!-- 处室处理时效统计 -->
    <div class="bottom-div">
      <el-row class="bottom-item dept-effity-div"
              v-loading="deptEffityDivLoading">
        <el-col :span="24">
          <div class="dept-effity-chart-div"
               ref="deptEffityChartDiv"
               id="deptEffityChartDiv"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  // 引入基本模板
  // 引入环形图图组件
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/line'
  // 引入提示框和title组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  let echarts = require('echarts/lib/echarts')

  export default {
    data () {
      return {
        // 年月日类型超期件统计
        ymdTypeDueCountData: {
          yearCount: '',
          monthCount: '',
          dayCount: '',
          complaintCount: '',
          adviseCount: '',
          questionCount: '',
          overdueCount: '',
          unsatisfyCount: ''
        },
        // 加载中
        warningDivLoading: false,
        stateDivLoading: false,
        sourceDivLoading: false,
        wholeNumDivLoading: false,
        deptNumDivLoading: false,
        deptEffityDivLoading: false,
        // 今日预警处室列表
        deptDayListData: [],
        // 工单办理状态列表
        stateListData: [],
        // 工单来源统计
        sourceData: {
          name: '',
          value: ''
        },
        wholeWorkData: {
          category: '',
          allNum: '',
          satisfyRate: '',
          efficiency: ''
        },
        // 处室办理量统计
        deptWorkData: {
          category: '',
          allNum: '',
          dueNum: '',
          unNum: ''
        },
        // 处室办理时效统计
        deptEffiecyData: {
          name: '',
          efficiency: '',
          unsatisfy: ''
        }
      }
    },
    methods: {
      // 年月日类型超期件统计
      getYmdTypeDueCountsFn () {
        this.$axios.post(this.$api.homeCharts.ymdTypeDueCounts).then(rs => {
          if (rs) {
            this.ymdTypeDueCountData = Object.assign(this.ymdTypeDueCountData, rs)
          }
        })
      },
      // 处室今日预警环形图
      getDeptDayCharts () {
        this.warningDivLoading = true
        this.$axios.post(this.$api.homeCharts.deptDayWarningCharts).then(rs => {
          if (rs) {
            this.deptDayListData = Object.assign(this.deptDayListData, rs)
            // console.log(this.deptDayListData);
            this.warningDivLoading = false
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.deptDayChartDiv)
            if (!myChart) return
            // 绘制图表
            let i = 0
            let colorsList = ['#D87A80', '#FFB980', '#E5CF0D', '#97B552', '#2EC7C9', '#5AB1EF', '#B6A2DE', '#AA8C8A', '#909399']
            myChart.setOption({
              title: {
                text: '今日预警',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              calculable: true,
              series: [
                {
                  name: '今日待处理',
                  type: 'pie',
                  radius: ['40%', '60%'],
                  center: ['50%', '52%'],
                  itemStyle: {
                    normal: {
                      label: {
                        show: false,
                        position: 'center'
                      },
                      labelLine: {
                        show: false
                      },
                      // 自定义颜色数组
                      color: function () {
                        return colorsList[i++]
                      }
                    },
                    emphasis: {
                      label: {
                        show: true,
                        position: 'center',
                        textStyle: {
                          fontSize: '18',
                          fontWeight: 'bold'
                        }
                      }
                    }
                  },
                  data: this.deptDayListData
                }
              ]
            })
          }
        })
      },
      // 状态统计
      getStateCharts () {
        this.stateDivLoading = true
        this.$axios.post(this.$api.homeCharts.stateCharts).then(rs => {
          if (rs) {
            this.stateListData = Object.assign(this.stateListData, rs)
            this.stateDivLoading = false
            // console.log(this.stateListData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.stateChartDiv)
            if (!myChart) return
            // 绘制图表
            let i = 0
            let colorsList = ['#FFB980', '#5AB1EF', '#97B552']
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年工单办理情况统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
              },
              // legend: {
              //   y: "bottom",
              //   selectedMode: false, //取消图例上的点击事件
              //   data: ["待办理", "办理中", "已办理"]
              // },
              calculable: true,
              series: [
                {
                  name: '工单办理情况统计',
                  type: 'pie',
                  radius: '60%',
                  center: ['50%', '52%'],
                  data: this.stateListData,
                  itemStyle: {
                    normal: {
                      label: {
                        show: true,
                        // position: "inner",
                        textStyle: {
                          fontSize: 14,
                          fontWeight: 'bolder',
                          fontFamily: 'Microsoft YaHei,微软雅黑'
                        },
                        formatter: '{b}：{c}'
                      },
                      labelLine: {
                        show: true
                      },
                      // 自定义颜色数组
                      color: function () {
                        return colorsList[i++]
                      }
                    },
                    emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            })
          }
        })
      },
      // 年月日统计
      getYmdCharts () {

      },
      // 工单来源统计
      getSourceCharts () {
        this.sourceDivLoading = true
        this.$axios.post(this.$api.homeCharts.sourceCharts).then(rs => {
          if (rs) {
            this.sourceData = rs
            this.sourceDivLoading = false
            // console.log(this.sourceData);
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.sourceChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年工单渠道来源统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              calculable: false,
              grid: {
                top: '32px',
                bottom: '36px',
                left: '112px',
                right: '99px',
                containLabel: false
              },
              xAxis: {
                type: 'value',
                name: '数量(件)',
                axisLabel: {
                  // 调整y轴的lable
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                },
                nameTextStyle: {
                  fontSize: 14,
                  fontFamily: 'Microsoft YaHei,微软雅黑'
                }
              },
              yAxis: {
                type: 'category',
                data: this.sourceData.name.split(','),
                axisLabel: {
                  // 调整x轴的lable
                  interval: 0, // 全部显示
                  clickable: false, // 可点击
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                }
              },
              series: [
                {
                  name: '工单渠道来源',
                  type: 'bar',
                  data: this.sourceData.value.split(','),
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#5AB1EF',
                      label: {
                        show: true,
                        position: 'right',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                }
              ]
            })
          }
        })
      },
      // 全局各月办理情况统计
      getWholeNumberCharts () {
        this.wholeNumDivLoading = true
        this.$axios.post(this.$api.homeCharts.wholeWorkCountCharts).then(rs => {
          if (rs) {
            this.wholeWorkData = rs
            this.wholeNumDivLoading = false
            console.log('wholeWorkData', this.wholeWorkData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.wholeNumberChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年全局工单处理情况统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                // formatter: "{a} <br/>{b} : {c} ",
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                data: ['办件数', '满意率', '回复周期'],
                y: 'top',
                right: '10%'
                // selectedMode: false, //取消图例上的点击事件
              },
              xAxis: {
                type: 'category',
                data: this.wholeWorkData.category.split(','),
                axisLabel: {
                  // 调整x轴的lable
                  interval: 0, // 全部显示
                  clickable: false, // 可点击
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                }
              },
              yAxis: [
                {
                  // name: "办件数(件)",
                  type: 'value',
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                }
                // {
                //     type: "value",
                //     scale: true,
                //     axisLabel: {
                //       //调整y轴的lable
                //       textStyle: {
                //         fontSize: 14 // 让字体变大
                //       }
                //     },
                //     nameTextStyle: {
                //       fontSize: 14,
                //       fontFamily: "Microsoft YaHei,微软雅黑"
                //     }
                //   }
              ],
              series: [
                {
                  data: this.wholeWorkData.allNum.split(','),
                  name: '办件数',
                  type: 'bar',
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#5AB1EF',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                },
                {
                  data: this.wholeWorkData.satisfyRate.split(','),
                  name: '满意率',
                  type: 'bar',
                  barCategoryGap: '50%',
                  // smooth: true,
                  itemStyle: {
                    normal: {
                      color: '#A6C75A',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                },
                {
                  data: this.wholeWorkData.efficiency.split(','),
                  name: '回复周期',
                  type: 'bar',
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#2EC7C9',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                }
              ]
            })
          }
        })
      },
      // 各处室工单办理量统计
      getDeptNumberCharts () {
        this.deptNumDivLoading = true
        this.$axios.post(this.$api.homeCharts.deptWorkCharts).then(rs => {
          if (rs) {
            this.deptWorkData = rs
            this.deptNumDivLoading = false
            // console.log(this.deptWorkData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.deptNumberChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年各处室工单处理量统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                // formatter: "{a} <br/>{b} : {c} ",
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                data: ['接收件数', '超期件数', '不满意件数'],
                y: 'top',
                right: '10%'
                // selectedMode: false, //取消图例上的点击事件
              },
              xAxis: {
                type: 'category',
                data: this.deptWorkData.category,
                axisLabel: {
                  // 调整x轴的lable
                  interval: 0, // 全部显示
                  clickable: false, // 可点击
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                }
              },
              yAxis: {
                type: 'value',
                name: '工单量(件)',
                axisLabel: {
                  // 调整y轴的lable
                  textStyle: {
                    fontSize: 14 // 让字体变大
                  }
                },
                nameTextStyle: {
                  fontSize: 14,
                  fontFamily: 'Microsoft YaHei,微软雅黑'
                }
              },
              series: [
                {
                  data: this.deptWorkData.allNum,
                  name: '接收件数',
                  type: 'bar',
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#5AB1EF',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      { type: 'max', name: '最大值' },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#5AB1EF'
                      }
                    }
                  }
                },
                {
                  data: this.deptWorkData.dueNum,
                  name: '超期件数',
                  type: 'bar',
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#D87A80',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                },
                {
                  data: this.deptWorkData.unNum,
                  name: '不满意件数',
                  type: 'bar',
                  barCategoryGap: '50%',
                  itemStyle: {
                    normal: {
                      color: '#FFB980',
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 14 // 让字体变大
                      }
                    }
                  }
                }
              ]
            })
          }
        })
      },
      // 个处理办理时效统计
      getDeptEffityCharts () {
        this.deptEffityDivLoading = true
        this.$axios.post(this.$api.homeCharts.deptHandleEfficiencyCharts).then(rs => {
          if (rs) {
            this.deptEffiecyData = rs
            this.deptEffityDivLoading = false
            // console.log(this.deptEffiecyData)
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(this.$refs.deptEffityChartDiv)
            if (!myChart) return
            // 绘制图表
            myChart.setOption({
              title: {
                text: this.$moment().format('YYYY') + '年各处室工单处理效率统计',
                x: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              legend: {
                data: ['处理时效(天)', '满意率(%)'],
                y: 'top',
                right: '10%',
                selectedMode: false // 取消图例上的点击事件
              },
              xAxis: [
                {
                  type: 'category',
                  data: this.deptEffiecyData.name.split(','),
                  axisLabel: {
                    // 调整x轴的lable
                    interval: 0, // 全部显示
                    clickable: false, // 可点击
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  scale: true,
                  name: '处理时效(天)',
                  min: 0,
                  max: 10,
                  boundaryGap: [0.2, 0.2],
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                },
                {
                  name: '满意率(%)',
                  type: 'value',
                  scale: true,
                  min: 0,
                  max: 100,
                  boundaryGap: [0.2, 0.2],
                  axisLabel: {
                    // 调整y轴的lable
                    textStyle: {
                      fontSize: 14 // 让字体变大
                    }
                  },
                  nameTextStyle: {
                    fontSize: 14,
                    fontFamily: 'Microsoft YaHei,微软雅黑'
                  }
                }
              ],
              series: [
                {
                  data: this.deptEffiecyData.unsatisfy.split(','),
                  name: '满意率(%)',
                  type: 'line',
                  yAxisIndex: 1,
                  smooth: true,
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 14, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      color: '#A6C75A',
                      lineStyle: {
                        color: '#A6C75A'
                      },
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 16 // 让字体变大
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      // { type: "max", name: "最大值" },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#A6C75A'
                      }
                    }
                  }
                },
                {
                  data: this.deptEffiecyData.efficiency.split(','),
                  name: '处理时效(天)',
                  type: 'line',
                  smooth: true,
                  showSymbol: true,
                  symbol: 'circle', // 设定为实心点
                  symbolSize: 16, // 设定实心点的大小
                  itemStyle: {
                    normal: {
                      color: '#2EC7C9',
                      lineStyle: {
                        color: '#2EC7C9'
                      },
                      label: {
                        show: true,
                        position: 'top',
                        fontSize: 16 // 让字体变大
                      }
                    }
                  },
                  markPoint: {
                    data: [
                      { type: 'max', name: '最大值' },
                      { type: 'min', name: '最小值' }
                    ],
                    itemStyle: {
                      normal: {
                        color: '#2EC7C9'
                      }
                    }
                  },
                  markLine: {
                    data: [
                      { type: 'average', name: '平均值' }
                    ]
                  }
                }
              ]
            })
          }
        })
      }
    },
    mounted: function () {
      this.getYmdTypeDueCountsFn()
      this.getDeptDayCharts()
      this.getStateCharts()
      this.getSourceCharts()
      this.getWholeNumberCharts()
      this.getDeptNumberCharts()
      this.getDeptEffityCharts()
    }
  }
</script>
